<template>
    <div>
        <div class="container">
        <div class="itinerary-header">
            <div class="headers">
                <h1>行程</h1>
                <img src="../assets/img/下载 (9).png" alt="">
            </div>
        </div>
        <div class="nav">
            <ul>
                <li @click="cur=0" :class="{'active':cur==0}">全部</li>
                <li @click="cur=1" :class="{'active':cur==1}">进行中</li>
                <li @click="cur=2" :class="{'active':cur==2}">已完成</li>
                <li @click="cur=3" :class="{'active':cur==3}" >已取消</li>
            </ul>
        </div>
        <div class="main">
            <div class="mains">
                <div class="mains-top">
                    <img src="../assets/img/下载 (10).png" alt="">
                    <span>您暂无相关订单</span>
                </div>
                <div class="mains-bottom">
                    <router-link tag="div" to="/home" class="button"><a style="color: #fff;">寻找爱车</a></router-link>
                </div>
            </div>
        </div>

        <div class="footer">
            <ul>
                <router-link tag="li" to="/home">
                    <img src="../assets/img/下载 (8).png" alt="">
                    <p>首页</p>
                </router-link>
                <router-link tag="li" to="/collection">
                     <img src="../assets/img/下载 (1).png" alt="">
                    <p>收藏</p>
                </router-link>
                <li>
                     <img src="../assets/img/下载 (11).png" alt="">
                    <p class="active"><a href="">行程</a></p>
                </li>
                <router-link tag="li" to="/mi">
                     <img src="../assets/img/下载 (3).png" alt="">
                    <p>我的</p>
                </router-link>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        data(){
          return{
            cur:0,
          }
        }
    }
</script>

<style lang="scss">
.itinerary-header {
  width: 100%;
  .headers {
    width: 90%;
    height: 85px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    h1 {
      padding-top: 30px;
    }
    img {
      width: 30px;
      height: 30px;
      margin-top: 35px;
    }
  }
}
.nav {
  width: 100%;
  margin-top: 10px;
  ul {
    width: 90%;
    margin: 0 auto;
    height: 50px;
    display: flex;
    justify-content: space-between;
    position: relative;
    li {
      width: 93px;
      height: 100%;
      text-align: center;
      line-height: 50px;
    }
    .active {
      color: #19cf97;
      font-weight: 700;
      
    }
    // .active::after{
    //   content: "";
    //     display: block;
    //     width: 30px;
    //     height: 4px;
    //     background: linear-gradient(270deg,#ffd100,rgba(255,209,0,0));
    //     position: absolute;
    //     bottom: 0;
    //     left: 25px;
    //   }
    
  }
}
.main {
  width: 100%;
  .mains {
    width: 90%;
    height: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .mains-top {
      width: 100%;
      height: 278px;
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        width: 125px;
        height: 125px;
        margin-top: 65px;
      }
      span {
        color: #e6e6e6;
      }
    }
    .mains-bottom {
      width: 100%;
      height: 308px;
      display: flex;
      align-items: center;
      flex-direction: column;
      position: relative;
      .button {
        width: 225px;
        height: 54px;
        background-color: #19cf97;
        border-radius: 30px;
        text-align: center;
        line-height: 54px;
        margin-top: 65px;
      }
      .order {
        width: 97px;
        height: 25px;
        background-color: #fff;
        box-shadow: 0 0 10px #eee;
        border-radius: 30px;
        color: #19cf97;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
        position: absolute;
        right: 15px;
        bottom: 25px;
      }
    }
  }
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  ul {
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: center;
    li {
      width: 94px;
      height: 100%;
      img {
        width: 35px;
        height: 35px;
        margin: 3px 30px;
      }
      p {
        text-align: center;
        font-size: 13px;
        line-height: 8px;
      }
      .active {
        a {
          color: #00cf97;
        }
      }
    }
  }
}

</style>